<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>OTT</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<script type="text/javascript" src="js/import.js"></script>
</head>
<style type="text/css">
	body{
		background: #f4dbe1 url(imgs/trdraw/trdraw.jpg) no-repeat center top;
		-webkit-background-size: contain;
		        background-size: contain;
	}
	.draw_rut{
		width:10%;
		position: absolute;
		top: 20%;left:45%;
		display: none;
	}
	.draw_rut img{
		-webkit-transform: scale(3);
		    -ms-transform: scale(3);
		        transform: scale(3);
	}
	.draw_rut .mymove{
		-webkit-animation:mymove 1.2s;
		        animation:mymove 1.2s;
	}
	.trans_draw{
		position: fixed;bottom: 0;left: 0; 
		width: 100%;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;padding: 0 8% 2%;
		-webkit-flex-wrap:wrap;
		    -ms-flex-wrap:wrap;
		        flex-wrap:wrap;-webkit-box-pack: justify;-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;
	}
	.trans_draw .tdr{
		position: relative;
		-webkit-box-flex:0;
		-webkit-flex:0 0 30%;
		    -ms-flex:0 0 30%;
		        flex:0 0 30%;margin-bottom: 4%; 
		width: 22%;height: auto;
	}
	.trans_draw .tdr img{
		width: 100%;
	}
	.trans_draw .tdr .restore{
	}
	.trans_draw .tdr .trdraw{
		z-index: -1;position: absolute;top:0px;left: 0;
		-webkit-transform: rotateY(180deg);
		        transform: rotateY(180deg);
	}
	@-webkit-keyframes mymove{
		0% {-webkit-transform: scale(0);transform: scale(0);}
		75% {-webkit-transform: scale(3.2);transform: scale(3.2);}
		100% {-webkit-transform: scale(3);transform: scale(3);}
	}
	@keyframes mymove{
		0% {-webkit-transform: scale(0);transform: scale(0);}
		75% {-webkit-transform: scale(3.2);transform: scale(3.2);}
		100% {-webkit-transform: scale(3);transform: scale(3);}
	}
</style>
<body>
	<p class="draw_rut"><img src="imgs/trdraw/1.gif" width="100%"></p>
	<div class="trans_draw">
		<p class="tdr"><img class="restore" src="imgs/trdraw/draw.jpg">
			<img class="trdraw" src="imgs/trdraw/0.gif"></p>
		<p class="tdr"><img class="restore" src="imgs/trdraw/draw.jpg">
			<img class="trdraw" src="imgs/trdraw/1.gif"></p>
		<p class="tdr"><img class="restore" src="imgs/trdraw/draw.jpg">
			<img class="trdraw" src="imgs/trdraw/2.gif"></p>
		<p class="tdr"><img class="restore" src="imgs/trdraw/draw.jpg">
			<img class="trdraw" src="imgs/trdraw/3.gif"></p>
		<p class="tdr"><img class="restore" src="imgs/trdraw/draw.jpg">
			<img class="trdraw" src="imgs/trdraw/4.gif"></p>
		<p class="tdr"><img class="restore" src="imgs/trdraw/draw.jpg">
			<img class="trdraw" src="imgs/trdraw/5.gif"></p>
	</div>
</body>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
	(function() {
	    var lastTime = 0;
	    var vendors = ['webkit', 'moz','o'];
	    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
	        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
	        window.cancelAnimationFrame =
	          window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
	    }
	    if (!window.requestAnimationFrame)
	        window.requestAnimationFrame = function(callback) {
	            var currTime = new Date().getTime();
	            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
	            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
	              timeToCall);
	            lastTime = currTime + timeToCall;
	            return id;
	        };
	    if (!window.cancelAnimationFrame)
	        window.cancelAnimationFrame = function(id) {
	            clearTimeout(id);
	        };
	}());

	var timer=null,rotateY = 0,count=0;
	var curtar ,
	 restore ,
	 trdraw ;
	$(".trans_draw .tdr").on("click",function(e){
		count++;
		if(count>1||timer){
			return;
		}
		curtar = $(e.currentTarget);
		restore = $(e.currentTarget).children(".restore");
		trdraw = $(e.currentTarget).children(".trdraw");
		rotateY = 0;
		if(curtar.css("transform")!=="none"){
			return;
		}
		// $.ajax({
  //           type: "POST",
  //           url: "/OTO/OTOMessage/DeleteShortMessage",
  //           data:  {"keyValue": editmesg["Id"]} ,
  //           success: function(msg) {
  //               startr();
  //           }
  //       });
  // 0-6 
  		var random = Math.floor(Math.random()*6);
  		trdraw.attr('src','imgs/trdraw/'+random+'.gif');
  		$(".draw_rut img").attr('src','imgs/trdraw/'+random+'.gif'); 
		startr();
		function startr(){
			timer= requestAnimationFrame(function(){
				startr();
			});
			curtar.css({"transform":"rotateY("+rotateY+"deg)"})
			rotateY+=5;
			if(rotateY>=90){
				trdraw.css({"z-index":"2"});
			}
			if(rotateY>=180){
				rotateY=180;
				cancelAnimationFrame(timer);
				timer=null;
				$(".draw_rut").css({"display":"block"});
				$(".draw_rut img").css({"transform":"scale(3)"});
				$(".draw_rut img").addClass("mymove");
			}
		}
	});
</script>
</html>